import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import 'amfe-flexible'  //设置根标签字体大小,进行移动端适配
import 'highlight.js/styles/default.css'  //引入文章代码高亮样式
import { NavBar, Form ,Field,Button,Tabbar, TabbarItem 
  ,Icon,Tab, Tabs,Cell, List,PullRefresh 
  ,ActionSheet,Popup,Search,Divider,Badge,
  Image,CellGroup,Tag,Dialog,DatetimePicker,Loading,Lazyload} from 'vant';  //引入每个组件
Vue.use(Button);
Vue.use(Form);
Vue.use(Field);
Vue.use(NavBar);
Vue.use(Tabbar);
Vue.use(TabbarItem);
Vue.use(Icon)
Vue.use(Tab);
Vue.use(Tabs);
Vue.use(Cell)
Vue.use(List);
Vue.use(PullRefresh)
Vue.use(ActionSheet)
Vue.use(Popup)
Vue.use(Search)
Vue.use(Divider)
Vue.use(Badge)
Vue.use(Image)
Vue.use(CellGroup)
Vue.use(Tag)
Vue.use(Dialog)
Vue.use(DatetimePicker )
Vue.use(Loading)
Vue.use(Lazyload,{  //引入图片懒加载并且配置加载中的图片
  loading:'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.zcool.cn%2Fcommunity%2F0158d05aa1ed29a801206d96a17bd4.gif&refer=http%3A%2F%2Fimg.zcool.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1656427484&t=a7b5787951c5c892fe7e0bfdfed89d1b'
})
Vue.config.productionTip = false
Vue.directive('fofo',{  //配置自定义指令 input框自动聚焦指令
    //inserted会在指令所在的标签插入真实DOM的时候触发,dispaly:none隐藏的时候不会触发
    inserted(el){
      //原生DOM.nodename可以拿到当前节点的名字
      //对el进行一个判断
      if(el.nodeName=='TEXTAREA' || el.nodeName=='INPUT'){
         el.focus()
      }else{//表示组件内部的input框,就在当前元素里面找input
            const inputt=el.querySelector('input')
            inputt.focus()
      }
    },
    update(el) {  //指令所在的标签被更新时会触发
      if(el.nodeName=='TEXTAREA' || el.nodeName=='INPUT'){
        el.focus()
     }else{
           const inputt=el.querySelector('input')
           inputt.focus()
     }
    },
})
new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')
